<template>
	<view>
		<tt-bar leftIcon="icon-back" title="发表评价"></tt-bar>
		<view class="content">
			<view class="goodBox">
				<view class="imgBox">
					<image :src="orderData.img"></image>
				</view>
				<view class="goodInfo">
					<text class="goodName">{{orderData.name}}</text>
					<text class="goodPrice">￥{{orderData.price.toFixed(2)}}</text>
				</view>
			</view>
			<view class="allElt">
				<text class="label">整体评价</text>
				<view class="starBox">
					<sx-rate :value="5" @change="starChange1" />
				</view>
				<text class="value">{{starArr[all]}}</text>
			</view>
			<textarea class="eltText" maxlength="100" placeholder="亲，您对这门课程满意吗？您的评价会帮助我们更好的优化课程哦~" v-model="content"></textarea>
			<view class="uploadImg">
				
				<view class="imgBox" v-for="(item,index) in selectImgList" :key="index" v-if="isShow">
					<text class="iconfont icon-guanbi2fill" @tap.stop="delImg(index)"></text>
					<image :src="item" @tap="replaceImg(index)"></image>
				</view>
				<view class="upBtn" @tap="selectImg" v-if="selectImgList.length<5">
					<text class="iconfont icon-xiangji"></text>
					<text class="btnText">上传图片</text>
				</view>
			</view>
			<view class="isHide">
				<text class="iconfont" :class="[isHide==1?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']" @tap="toggleHide"></text>
				<text>匿名</text>
				<text class="tt">您的真实评价能帮助更多的小伙伴</text>
			</view>

		</view>
		<view class="evaluateList">
			<text class="title">店铺评价</text>
			<view class="row">
				<text class="label">教学质量</text>
				<view class="starBox">
					<sx-rate :value="0" containerClass="starBox" margin="30px" @change="starChange2"  />
				</view>
				<text class="value">{{starArr[jiaoxue]}}</text>
			</view>
			<!-- <view class="row">
				<text class="label">环境质量</text>
				<view class="starBox">
					<sx-rate :value="0" containerClass="starBox" margin="30px" @change="starChange3"  />
				</view>
				<text class="value">非常好</text>
			</view> -->
			<view class="row">
				<text class="label">服务态度</text>
				<view class="starBox">
					<sx-rate :value="0" containerClass="starBox" margin="30px" @change="starChange4" />
				</view>
				<text class="value">{{starArr[fuwu]}}</text>
			</view>
		</view>
		<view class="btmOp">
			<button @tap="tijiao" :disabled="isDis">提交评价</button>
		</view>
		<hk-modal ref="hkModal"></hk-modal>
	</view>
</template>

<script>
	import sxRate from "@/pagesA/components/sx-rate/index.vue";
	import ttBar from "@/components/ttBar/ttBar.vue";
	import API from "@/common/api.js";
	export default {
		components: {
			ttBar,
			sxRate
		},
		data() {
			return {
				starArr:['未评价','非常差','差','一般','好','非常好'],
				all:5,
				jiaoxue:0,
				fuwu:0,
				isHide:0,
				selectImgList:[],
				isShow:true,
				orderId:0,
				orderData:{
					img:'',
					price:0
				},
				content:'',
				isDis:false
			};
		},
		methods:{
			getData(){
				this.$store.dispatch('apiGetOrderDt', {
					orderNo: this.orderId
				}).then(res => {
					this.orderData = res.data.data
				})
			},
			// 整体
			starChange1(e){
				this.all=e;
			},
			// 教学
			starChange2(e){
				this.jiaoxue=e;
			},
			// 环境
			// starChange3(e){
			// 	console.log(e);
			// },
			// 服务
			starChange4(e){
				this.fuwu=e;
			},
			toggleHide(){
				if(this.isHide==0){
					this.isHide=1
				}else{
					this.isHide=0
				}
				
			},
			// 选择图片
			selectImg(){
				let _this=this
				let _count=5-_this.selectImgList.length;
				uni.chooseImage({
				    count: _count, 
				    sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						console.log(res);
						let _allCount=_this.selectImgList.length+res.tempFilePaths.length;
						if(_allCount>5){
							uni.showToast({
								title: '最多只能上传5张照片',
								icon: 'none'
							});
						}else{
							let _overSize=res.tempFiles.every((x)=>{
								return x.size<=3145728
							})
							if(_overSize){
								if(_this.selectImgList.length>0){
									_this.selectImgList=_this.selectImgList.concat(res.tempFilePaths)
								}else{
									_this.selectImgList=res.tempFilePaths;
								}
								console.log(_this.selectImgList);
							}else{
								uni.showToast({
									title: '图片不能超过3M',
									icon: 'none'
								});
							}
							
						}
						
				    }
				});
			},
			// 替换图片
			replaceImg(e){
				let _this=this;
				let _index=parseInt(e);
				uni.chooseImage({
				    count: 1, 
				    sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						let _overSize=res.tempFiles.every((x)=>{
							return x.size<=3145728
						})
						if(_overSize){
							_this.selectImgList[_index]=res.tempFilePaths[0];
							_this.isShow=false;
							_this.isShow=true;
						}else{
							uni.showToast({
								title: '图片不能超过3M',
								icon: 'none'
							});
						}
				    }
				});
			},
			// 删除图片
			delImg(e){
				let _index=parseInt(e);
				this.selectImgList.splice(_index,1)
			},
			// 提交数据
			tijiao(){
				let _this=this;
				if(_this.all==0){
					uni.showToast({
						title: '请为整体评价打分',
						icon: 'none'
					});
				}else if(_this.jiaoxue==0){
					uni.showToast({
						title: '请为教学质量打分',
						icon: 'none'
					});
				}else if(_this.fuwu==0){
					uni.showToast({
						title: '请为服务态度打分',
						icon: 'none'
					});
				}else{
					if(!_this.content){
						_this.$refs.hkModal.init({
							title:'提示',
							cntText:'您的评价对商家很重要，是否继续评价？',
							confirm:'继续',
							cancle:'返回',
							confirmFcn:()=>{
								_this.isDis=true;
								_this.postData()
							}
						})
						_this.$refs.hkModal.show()
					}else{
						_this.isDis=true;
						_this.postData()
					}
					
				}
			},
			postData(){
				let _this=this;
				if(_this.selectImgList.length>0){
					let upArr=[];
					_this.selectImgList.forEach(function(x){
						upArr.push({uri:x,name:'file'})
					})
				
					API.uploadImg(upArr).then(res=>{
						let _postImg=[];
						res.forEach(function(item){
							_postImg.push({
								type:2,
								url:item
							})
						})
						console.log(_postImg);
						uni.hideLoading()
						let _data={
							orderId:_this.orderData.order_id,
							content:_this.content,
							score:_this.all,
							teachScore:_this.jiaoxue,
							serverScore:_this.fuwu,
							type:_this.isHide,
							resList:_postImg
						}
						_this.$store.dispatch("apiPostEvaluate",_data)
						.then(resRlt=>{
							uni.showToast({
								title: '评价成功',
								icon: 'none'
							});
							setTimeout(()=>{
								uni.redirectTo({
									url:"../evaluateResult/evaluateResult"
								})
							},1000)
						}).catch(err=>{
							_this.isDis=false
						})
					}).catch(()=>{
						_this.isDis=false
					})
				}else{
					let _data={
						orderId:_this.orderData.order_id,
						content:_this.content,
						score:_this.all,
						teachScore:_this.jiaoxue,
						serverScore:_this.fuwu,
						type:_this.isHide,
					}
					_this.$store.dispatch("apiPostEvaluate",_data)
					.then(res=>{
						uni.showToast({
							title: '评价成功',
							icon: 'none'
						});
						setTimeout(()=>{
							uni.redirectTo({
								url:"../evaluateResult/evaluateResult"
							})
						},1000)
					}).catch(err=>{
						_this.isDis=false
					})
					
				}
			}
		},
		
		onLoad(cfm) {
			this.orderId=cfm.oid;
			this.getData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less" scoped>
	page {}
	.btmOp{
		position: fixed;
		width: 100%;
		height: 120upx;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0 98upx;
		button{
			width: 100%;
			height: 88upx;
			background-color: #ffb423;
			border-radius: 44upx;
			line-height: 88upx;
			color: #FFFFFF;
			border: none;
			font-size: 32upx;
			outline: none;
		}
		button:after{
			border: none;
			outline: none;
		}
	}
	.goodBox {
		display: flex;

		.imgBox {
			width: 180upx;
			height: 180upx;

			image {
				width: 180upx;
				height: 180upx;
				border-radius: 10upx;
			}
		}

		.goodInfo {
			padding-left: 28upx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.goodName {
				font-size: 36upx;
				color: #202932;
			}

			.goodPrice {
				font-size: 38upx;
				font-weight: bold;
				color: #ff3d3d;
			}
		}
	}

	.allElt {
		display: flex;
		align-items: center;
		padding: 28upx 0;
		border-bottom: 1px solid #efefef;

		.label {
			font-size: 32upx;
			font-weight: bold;
			color: #202932;
		}
		.value{
			color: #b4b4b4;
			font-size: 32upx;
		}
	}

	.eltText {
		font-size: 30upx;
		padding-top: 26upx;
		width: 100%;
		height: 160upx;
	}

	.uploadImg {
		display: flex;
		flex-wrap: wrap;

		.imgBox {
			width: 180upx;
			height: 180upx;
			position: relative;
			margin-right: 20upx;
			margin-bottom: 20upx;

			image {
				width: 180upx;
				height: 180upx;
				border-radius: 10upx;
			}

			.iconfont {
				position: absolute;
				top: -16upx;
				right: -16upx;
				font-size: 40upx;
				color: #ff3d3d;
				z-index: 3;
			}
		}

		.upBtn {
			width: 180upx;
			height: 180upx;
			box-sizing: border-box;
			border-radius: 10upx;
			border: 1rpx dashed #cccccc;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #b2b2b2;
			margin-bottom: 20upx;

			.iconfont {
				font-size: 60upx;
			}

			.btnText {
				font-size: 28upx;
			}
		}
	}

	.isHide {
		display: flex;
		align-items: center;
		padding: 38upx 0;
		border-top: 1px solid #efefef;

		text {
			font-size: 28rpx;
			color: #202932;
		}

		.iconfont {
			font-size: 38upx;
			margin-right: 6upx;
		}

		.icon-yuanxingxuanzhongfill {
			color: #ffb72d;
		}

		.tt {
			flex-grow: 1;
			text-align: right;
		}
	}

	.evaluateList {
		border-top: 16upx solid #f6f6f6;
		padding: 28upx;
		display: flex;
		flex-direction: column;
		padding-bottom: 148upx;
		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #202932;
			margin-bottom: 28upx;
		}
		.row{
			padding: 10upx 0 10upx 10upx;
			display: flex;
			align-items: center;
			.label{
				font-size: 28upx;
				color:#202932;
			}
			.value{
				font-size: 28upx;
				color: #b4b4b4;
			}
		}
	}
	.starBox{
		padding: 0 30upx;
	}
</style>
